<!--
*@Author: QWP
*@Description: 流程图
*@Date: 2024-07-30 22:21:12
-->
<template>
  <!-- <a-layout>
    <a-layout-content>
    </a-layout-content>
  </a-layout> -->
  <!--  style="width: 100%; height: 500px" -->
  <div id="container"></div>
</template>

<script lang='ts' setup>
defineOptions({
  name: 'u-flow-chart-ant'
})
import { ref, reactive, computed, onMounted } from 'vue' 
import { useRoute, useRouter } from 'vue-router'
import { Graph } from '@antv/x6'
import { urlFile } from '@/util/common'

interface Props {}

onMounted(() => {
  registerNode()
  initChart()
})

const oreiginData = [
  {label: '发文起草', author: '丁艳玲'},
  {label: '部门领导审核', author: '马权'},
  {label: '会签', author: '王凌云'},
  {label: '办公室核稿', author: '邱文平'},
  {label: '分管领导', author: '杨鑫'},
  {label: '总经理签发', author: '张三'},
  {label: '办公室文秘处理', author: '李四'},
  {label: '清稿', author: '张飞'},
  {label: '排版', author: '关羽'},
  {label: '编号', author: '刘备'},
  {label: '套红', author: '曹操'},
  {label: '编号', author: '赵云'},
  {label: '用印', author: '马超'},
  {label: '分发传阅', author: '诸葛亮'},
  {label: '预归档', author: '黄忠'},
  {label: '结束', author: '周瑜'},
]

// 注册自定义节点
const registerNode = (data) => {
  Graph.registerNode(
  'c-node',
    {
      width: 150,
      height: 80,
      attrs: {
        body: {
          strokeWidth: 1,
          refWidth: 1,
          refHeight: 1,
          rx: '8',
          stroke: "#73D13D",
        },
        image: {},
        title: {
          refX: 20,
          refY: 18,
          fill: '#333',
          fontSize: 16,
          'text-anchor': 'start',
        },
        text: {
          refX: 20,
          refY: 45,
          fontSize: 14,
          fill: '#666',
          'text-anchor': 'start',
        },
      },
      data: data,
      markup: [
        {
          tagName: 'rect',
          selector: 'body',
        },
        {
          tagName: 'image',
          selector: 'image',
        },
        {
          tagName: 'text',
          selector: 'title',
        },
        {
          tagName: 'text',
          selector: 'text',
        },
      ],
    },
    true,
  )

  Graph.registerEdge(
    'c-edge',
    {
      zIndex: -1,
      attrs: {
        line: {
          strokeWidth: 1,
          stroke: '#73D13D',
          sourceMarker: null,
        },
      },
    },
    true,
  )
}

// 初始化画布
const initChart = () => {
  const graph = new Graph({
    container: document.getElementById('container'),
    width: '100%',
    height: 500,
    background: {
      color: '#F2F7FA',
    },
    translating: {
      restrict: false 
    }
  })
  createNode(graph)
}

// 创建边
const createEddge = (i: number): Object =>{
  return {
    id: 'edge'+ i,
    source: 'node' + (i - 1),
    target: 'node' + i,
    shape: 'c-edge',
  }
}

// 创建并渲染节点
const createNode = (graph) => {
  let maxW = document.getElementById('container').clientWidth - 100
  let data = [];
  let startX = 40, startY = 40, splitW = 260, splitH = 0, sH = 160, type = 'add';
  let nodeW = 150, nodeH = 80;
  for(let i = 0; i < oreiginData.length; i++) {
    if(startX + splitW > maxW  && type == 'add') {
      startX = startX
      type = 'reduce'
      splitH += sH
    }
    else if(startX - splitW < 0 && type == 'reduce') {
      startX = 40;
      type = 'add'
      splitH += sH
    } else {
      if(i != 0) {
        startX = type == 'add' ? startX + splitW : startX - splitW
      }
    }
    data.push({
      id: 'node'+ i,
      x: startX,
      y: startY + splitH,
      width: nodeW,
      height: nodeH,
      shape: 'c-node',
      attrs: {
        body: {
          fill: oreiginData[i]['label'] == '套红'? "#EFF6FF" : '#F5FFEF',
          stroke: oreiginData[i]['label'] == '套红'? "#4096FF" : "#73D13D",
        },
        title: {
          text: oreiginData[i]['label']
        },
        text: {
          text: '操作者:  ' + oreiginData[i]['author']
        },
      }
    })
    if(i != 0 ) {
      data.push(createEddge(i))
    }
  }
  graph.fromJSON([...data, ...createTipNode()])
}

// 创建提示信息
const createTipNode = () => {
  const oData = [
    { type: 'c-node', x: 40,  body: {fill: "#73D13D"}, title: { text: '已经过的节点'},  },
    { type: 'c-node', x: 120,  body: {fill: "#4096FF"}, title: { text: '当前节点'}, },
    { type: 'c-node', x: 200,  body: {fill: "#FFA940"}, title: { text: '还未经过的节点'}, },
    { type: 'c-node', x: 280,  body: {fill: "transparent"}, title: { refX: 30, text: '已经过的出口'}, 
      image: {
        'xlink:href': urlFile('flow/ck1.png'),
        width: 30,
        height: 20,
        x: 0,
        y: -5,
      }
    },
    { type: 'c-node', x: 360,  body: {fill: "transparent"}, title: { refX: 30, text: '可能会经过的出口'}, 
      image: {
        'xlink:href': urlFile('flow/ck2.png'),
        width: 30,
        height: 20,
        x: 0,
        y: -5,
      }
    },
  ]

  let data = [];
  oData.forEach((item, index) => {
    data.push(
      {
        id: 'tip' + item.x,
        x: 40 + (index * 180),
        y: 10,
        width: 10,
        height: 10,
        shape: 'c-node',
        attrs: {
          body: {
            rx: 0,
            stroke: "transparent",
            ...(item.body || {})
          },
          image: { ...(item.image || {}) },
          text: {
            refX: 22,
            refY: 0,
            fontSize: 12,
            fill: "#666",
            ...(item.title ||  {})
          },
        }
      }
    )
  })

  return data;
}



</script>

<style lang='scss' scoped>
</style>